<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="utf-8" />
		<title>Test</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="Daniel Bielczyk" />
		<meta name="robots" content="noindex,nofollow" />

		<link rel="stylesheet" media="all" href="styles/style.css" />

		<script src="js/compiler.php"></script>
		
		<script>

function log(text) {
	var log = document.getElementById("log");
	
	log.innerHTML += "<br />" + text;
}



new sCanvas("canvas0", function() {
	log("Canvas0 correctly initialized - how is that possible?");
}, function(e) {
	log("Canvas0 was not initialized – " + e.error.message);
});



new sCanvas("canvas1", function() {
	
	this.circ(20, 20, 20);
	this.circ({
		x: 60,
		y: 20,
		radius: 20,
		fill: "red"
	}).attr("stroke", "blue");
	this.rect(80, 0, 60, 40);
	this.rect({
		x: 160,
		y: 20,
		width: 28,
		height: 28,
		rotation: 45,
		fill: "green"
	});
	var l = this.line(180, 20)
	.addLine(200, 20)
	.addQuadratic(220, 20, 210, 10)
	.addCubic(240, 20, 225, 0, 235, 40);
	l.attr({
		shadowX: 5,
		shadowY: 3,
		shadowColor: "red"
	});
	this.line(0, 90).addLine(this.width(), 90).attr("stroke", "#fff");
	this.text("Ďy", 0, 90).attr("fontSize", 30);
	this.text("Ďy", {
		x: 45,
		y: 90,
		fontSize: 30,
		baseline: "middle"
	});
	this.text("Ďy", {
		x: 90,
		y: 90,
		fontSize: 30,
		baseline: "top"
	});
	this.text("Ďy", {
		x: 135,
		y: 90,
		fontSize: 30,
		baseline: "bottom"
	});
	this.line(300, 0).addLine(300, this.height()).attr("stroke", "#fff");
	this.text("Ďy", 300, 40).attr("fontSize", 30);
	this.text("Ďy", {
		x: 300,
		y: 80,
		fontSize: 30,
		align: "center"
	});
	this.text("Ďy", {
		x: 300,
		y: 120,
		fontSize: 30,
		align: "right"
	});
	this.image(document.getElementById("w3c"), 10, 150);
	this.image("http://www.w3.org/Icons/w3c_home.png", {
		x: 164,
		y: 198,
		width: 144,
		height: 96,
		opacity: 0.5
	});
	
	for (var i = 0; i < 5; i++) {
		this.rect({
			x: 370,
			y: 150 + 25 * i,
			width: 20,
			height: 20,
			id: "rect" + i,
			group: "rects"
		});
	}
	
	this.get("rects").attr("fill", "gray");
	
	this.get("rect0").addGroup("edge");
	this.get("rect4").addGroup("edge");
	
	this.group("edge").attr("stroke", "black");
	
	var middle = this.group("middle");
	
	middle.add(this.get("rect1")).add(this.get("rect2")).add(this.get("rect3"));
	
	this.get("rect2").removeGroup("middle");
	
	middle.attr("rotation", 45);
	
	
	
}, function(e) {
	log("Canvas1 was not initialized. – " + e.error.message);
});



new sCanvas("canvas2", function() {
	
	var obj = this.rect({
		x: 20,
		y: 20,
		width: 30,
		height: 30
	});
	
	this.text("restart", {
		x: 50,
		y: 25,
		fontSize: 15
	}).click(function() {
		obj.stop(true)
		.attr({
			x: 20,
			y: 20,
			rotation: 0
		})
		.animate({
			y: 280
		}, 3000)
		.animate({
			x: "+=120"
		}, {
			repeat: 3,
			duration: "slow"
		})
		.animate({
			y: 20
		}, 3000);
	});
	
	this.text("pause()", {
		x: 50,
		y: 75,
		fontSize: 15
	}).click(function() { obj.pause(); });
	
	this.text("play()", {
		x: 50,
		y: 100,
		fontSize: 15
	}).click(function() { obj.play(); });
	
	this.text("isPaused()", {
		x: 50,
		y: 125,
		fontSize: 15
	}).click(function() { log(obj.isPaused() ? "paused - true" : "paused - false"); });
	
	this.text("stop()", {
		x: 140,
		y: 75,
		fontSize: 15
	}).click(function() { obj.stop(); });
	
	this.text("stop(true)", {
		x: 140,
		y: 100,
		fontSize: 15
	}).click(function() { obj.stop(true); });
	
	this.text("stop(true, true)", {
		x: 140,
		y: 125,
		fontSize: 15
	}).click(function() { obj.stop(true, true); });
	
	this.text("stop(false, true)", {
		x: 140,
		y: 150,
		fontSize: 15
	}).click(function() { obj.stop(false, true); });
	
	this.text("clearQueue()", {
		x: 260,
		y: 75,
		fontSize: 15
	}).click(function() { obj.clearQueue(); });
	
	this.text("finish()", {
		x: 260,
		y: 125,
		fontSize: 15
	}).click(function() { obj.finish(); });
	
	
}, function(e) {
	log("Canvas2 was not initialized. – " + e.error.message);
});



new sCanvas("canvas3", function() {
	console.log(this);
	var r = this.rect({
		x: 60,
		y: 20,
		originX: -60,
		originY: -20,
		width: 60,
		height: 40,
		rotation: 25
	}).click(function() {
		log("rect click");
		c.dblclick();
		c.trigger("mouseleave");
		c.unbind("mouseleave");
	});
	
	var box = r.box();
	this.rect(box.left, box.top, box.width, box.height).attr({
		fill: "rgba(255, 0, 0, 0.3)"
	}).over(r).under(r).over(r);
	
	var c = this.circ(140, 50, 40)
	.hover(function() {
		log("circ hover in");
	}, function() {
		log("circ hover out");
	})
	.click(function() {
		log("circ click");
	})
	.mouseup(function() {
		log("circ up");
	})
	.mousedown(function() {
		log("circ down");
	})
	.dblclick(function() {
		log("circ dblclick - " + this.data("val"));
	})
	.mouseenter(function() {
		log("circ enter");
	})
	.mouseleave(function() {
		log("circ leave");
	})
	.data("val", "hodnota");
	
	box = c.box();
	this.rect(box.left, box.top, box.width, box.height).attr({
		fill: "rgba(255, 0, 0, 0.3)"
	}).over(c);
	
	this.rect(200, 30, 50, 50).bind("mousemove", function() {
		log("move");
	});
	
	this.rect(0, 0, 10, 10).bind("click", function(e) {
		log("[" + e.canvasX + ";" + e.canvasY + "]");
	});
	
}, function(e) {
	log("Canvas3 was not initialized. – " + e.error.message);
});

//new sCanvas("canvas4", function() {
//	var i, j,
//		sc = this;
//	for (i = 0; i < 20; i++) {
//		for (j = 0; j < 18; j++) {
//			this.rect(5 + i * 15, 5 + j * 15, 10, 10).attr("group", "rect");
//		}
//	}
//	
//	setTimeout(function() {
//		sc.get("rect").animate({
//			x: "+=" + 80
//		}, 3000);
//	}, 10000);
//});

		</script>
		
		<style>
			
			div{
				display: block;
				width: 400px;
				height: 300px;
				float: left;
			}
			
			img{
				display: block;
				float: left;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="canvas1">
			<canvas width="400" height="300" style="background-color: #ccc;"></canvas>
		</div>
		<img src="./result.png" width="400" height="300" />
		<div id="canvas2" style="clear: both;">
			<canvas width="400" height="300" style="background-color: #fcc;"></canvas>
		</div>
		<div id="canvas3">
			<canvas width="400" height="300" style="background-color: #cfc;"></canvas>
		</div>
<!--		<div id="canvas4" style="clear: both;">
			<canvas width="400" height="300" style="background-color: #cfc;"></canvas>
		</div>-->
		
		<img src="http://www.w3.org/Icons/w3c_home.png" id="w3c" />
		
		
		
		<div id="log" style="width: 800px; clear: both; font-family: arial;"></div>
		
	</body>
</html>